/*
 * 主页页面
 * */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Navigator,
    TouchableHighlight,
    TouchableWithoutFeedback,
    Platform,
    TextInput,
    ScrollView,
    Image,
    View
} from 'react-native';

import Menu, { MenuContext, MenuOptions, MenuOption, MenuTrigger } from 'react-native-menu';

const Banner = require('react-native-banner');
const Icon=require('react-native-vector-icons/Ionicons');
import Drawer from 'react-native-drawer';


import Category from './Category';
import Search from './Search';


export default class Home extends Component {

    constructor(props) {
        super(props);
        this.banners = [
            {
                title: 'beauty 1',
                image: 'http://www.qq745.com/uploads/allimg/141106/1-141106153Q5.png',
            },
            {
                title: 'beauty 2',
                image: 'http://img1.3lian.com/2015/a1/53/d/200.jpg',
            },
            {
                title: 'The next banner has no title',
                image: 'http://img1.3lian.com/2015/a1/53/d/198.jpg',
            },
            {
                // title: 'no title',
                image: 'http://image.tianjimedia.com/uploadImages/2012/235/9J92Z5E5R868.jpg',
            },
        ];

        this.state = {
            clickTitle: 'You can try clicking beauty',
            defaultIndex: 0,
        }
        this.defaultIndex = 0;
    }

    closeControlPanel = () => {
        this._drawer.close();
    }
    openControlPanel = () => {
        this._drawer.open();
    }



    render() {
        return (
            <View style={[styles.container]}>
                <Drawer  style={[styles.container]}
                    ref={(ref) => this._drawer = ref}
                    content={<SidemenuComponent/>}
                    type="static"
                    openDrawerOffset={100}
                    tweenHandler={Drawer.tweenPresets.parallax}
                >
                    <View style={[styles.nav_container]}>
                        <View>
                            <TouchableHighlight
                                onPress={()=>this.openControlPanel()}
                            >
                                <Icon style={[styles.nav_logo,styles.nav_left]} name="logo-github" color="#2f4f4f" />
                            </TouchableHighlight>
                        </View>
                        <View>
                            <TouchableWithoutFeedback
                                onPress={()=>this.props.navigator.push({
                                    sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                                    component: Search,
                                    params:{
                                        name: '查询页面'
                                    }
                                })}
                            >
                           <View style={{height:30,borderBottomWidth:2,marginTop:5,marginBottom:5,borderRadius:20,backgroundColor: 'white',flex:1,width:200,alignItems:'center', justifyContent:'center'}}>
                               <Text style={{color:'#a9a9a9'}}>请输入关键词</Text>
                           </View>
                                </TouchableWithoutFeedback>
                        </View>
                        <View>
                             <TouchableHighlight
                                onPress={()=>this.openControlPanel()}
                             >
                                <Icon style={[styles.nav_logo,styles.nav_right]} name="ios-menu" color="#2f4f4f" />
                             </TouchableHighlight>
                        </View>
                    </View>
                    <ScrollView style={{backgroundColor:'white'}}>
                        <Banner
                            banners={this.banners}
                            defaultIndex={this.defaultIndex}
                            onMomentumScrollEnd={this.onMomentumScrollEnd.bind(this)}
                            intent={this.clickListener.bind(this)}
                        />
                        <Text style={styles.nav}>{this.state.clickTitle}1</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}2</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}333</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}44444</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}5</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}6</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}7444</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}会尽快还看见没，8</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}9方法地方地方会尽快回家客户</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}10</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}11</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}12</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}13</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}14</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}15</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}16</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}17</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}18</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}19</Text>
                        <Text style={styles.nav}>{this.state.clickTitle}110</Text>
                    </ScrollView>
                </Drawer>
            </View>
        );
    }

    clickListener(index) {
        this.setState({
            clickTitle: this.banners[index].title ? `you click ${this.banners[index].title}` : 'this banner has no title',
        })
    }

    onMomentumScrollEnd(event, state) {
        console.log(`--->onMomentumScrollEnd page index:${state.index}, total:${state.total}`);
        this.defaultIndex = state.index;
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    nav_container: {
        flexDirection:'row',
        flexWrap:'nowrap',
        justifyContent:'space-between',
        backgroundColor: '#00bfff',
        height:40
    },
    nav_logo:{
        textAlign:'center',
        fontSize:35,
    },
    nav_left:{
        paddingLeft:10
    },
    nav_right:{
        paddingRight:10
    }



});


class SidemenuComponent extends Component {
    render() {
        return (
            <View style={{flex:1}}>
                <View style={{height:30,backgroundColor:'yellow'}}>
                    <Text>上</Text>
                </View>
                <View style={{flex:1,backgroundColor:'blue'}}>
                    <Text>中</Text>
                </View>
                <View style={{height:30,backgroundColor:'green'}}>
                    <Text>下</Text>
                </View>
            </View>
        )
    }

}

